<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>devtools-detector demo</title>
    <style>
      .line {
        margin-top: 10px;
        text-align: center;
      }

      #status {
        margin-top: 50px;
        font-size: 30px;
      }

      #checker {
        color: brown;
      }
    </style>
    <script src="./promise-polyfill.js"></script>
    <script src="../lib/devtools-detector.js"></script>
  </head>

  <body>
    <div id="status" class="line">devtools status: close</div>
    <div id="checker" class="line"></div>
    <div id="ua" class="line"></div>
    <div id="versionMap" class="line"></div>
    <script>
      const status = document.getElementById('status');
      const checker = document.getElementById('checker');
      const ua = document.getElementById('ua');
      const versionMap = document.getElementById('versionMap');

      devtoolsDetector.addListener(function (isOpen, detail) {
        console.log('isOpen', isOpen);

        if (isOpen) {
          status.innerText = 'devtools status: open';
          checker.innerText = detail.checkerName;
        } else {
          status.innerText = 'devtools status: close';
          checker.innerText = '';
        }
      });

      devtoolsDetector.launch();

      ua.innerText = 'UserAgent: ' + navigator.userAgent;
      versionMap.innerText = Object.keys(devtoolsDetector.versionMap)
        .map(function (key) {
          return key + ' : ' + devtoolsDetector.versionMap[key];
        })
        .join('\n');
    </script>
  </body>
</html>
